<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增班级')" />
    <th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
<div class="main-content">

    <form class="form-horizontal" id="form-class-add">
        <input type="hidden" id="dates" name="dates"/>
        <input type="hidden" id="courseId" name="courseId"/>

        <input type="hidden" id="time1" name="time1"/>
        <input type="hidden" id="time2" name="time2"/>
        <input type="hidden" id="time3" name="time3"/>
        <input type="hidden" id="time4" name="time4"/>
        <input type="hidden" id="tempDate" name="tempDate"/>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-4 control-label is-required">课程名称：</label>
                    <div class="col-xs-8">
                        <button type="button" class="btn btn-w-m btn-primary" onclick="selectCourse()" >选择</button>
                        <span id="courseName" style="color: red;"></span>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-4 control-label is-required">课次：</label>
                    <div class="col-xs-8">
                        <input name="courseNum" id="courseNum" placeholder="请填写课次" class="form-control" type="text" maxlength="5" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-4 control-label is-required">班级名称：</label>
                    <div class="col-xs-8">
                        <input name="name" placeholder="请输入班级名称" class="form-control" type="text" maxlength="100" required>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-4 control-label is-required">班级类型：</label>
                    <div class="col-xs-8">
                        <select name="classTypeId" id="classTypeId" required class="form-control">
                            <option value="">请选择</option>
                            <option th:each="t : ${classTypeList}"  th:text="${t.name}" th:value="${t.id}"></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-4 control-label is-required">所属年份：</label>
                    <div class="col-xs-8">
                        <select name="years" id="years" required class="form-control">
                            <option value="2020">2020</option>
                            <option value="2021">2021</option>
                            <option value="2022">2022</option>
                            <option value="2023">2023</option>
                            <option value="2024">2024</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-4 control-label is-required">所属学期：</label>
                    <div class="col-xs-8">
                        <select name="semesterId" id="semesterId" required class="form-control">
                            <option value="">请选择</option>
                            <option th:each="t : ${semesterList}"  th:text="${t.name}" th:value="${t.id}"></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">任课老师：</label>
                    <div class="col-sm-8">
                        <select name="teacherId" id="teacherId" required class="form-control">
                            <option value="">请选择</option>
                            <option th:each="t : ${teacherList}"  th:text="${t.userName}" th:value="${t.userId}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">班主任：</label>
                    <div class="col-sm-8">
                        <select name="headmasterId" id="headmasterId" required class="form-control" >
                            <option value="">请选择</option>
                            <option th:each="t1 : ${teacherList}" th:text="${t1.userName}" th:value="${t1.userId}"></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-4 control-label is-required">计划招生：</label>
                    <div class="col-xs-8">
                        <input name="planStuNum" id="planStuNum" placeholder="请输入预计招生人数" class="form-control" type="text" maxlength="5" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-4 control-label is-required">上课教室：</label>
                    <div class="col-xs-8">
                        <select name="classRoomId" id="classRoomId" required class="form-control" >
                            <option value="">请选择</option>
                            <option th:each="t1 : ${classRoomList}" th:text="${t1.name}" th:value="${t1.id}"></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-4 control-label is-required">排课时间：</label>
                    <div class="col-xs-8">
                        <label><input type="radio" checked="" value="0" id="planClassType1" name="planClassType" onclick="selectClassType(0)">&nbsp;按日期 &nbsp;&nbsp;</label>
                        <label><input type="radio" value="1" id="planClassType2" name="planClassType" onclick="selectClassType(1)">&nbsp;待定</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-4 control-label" id="tempBtn"><button type="button" class="btn btn-w-m btn-primary" onclick="selectDate()" >选择日期</button></label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 table-striped">
                <!--<table id="bootstrap-table"></table>-->
                <table  class="table table-bordered" lay-filter="parse-table-demo" id="tempTable">
                    <thead>
                        <tr>
                            <th lay-data="{field:'username', width:200}">日期</th>
                            <th lay-data="{field:'joinTime', width:200}">上课时段</th>
                            <th lay-data="{field:'sign', minWidth: 180}"> <button type="button" class="btn btn-w-m btn-primary" onclick="selectTime('')" >批量设置上课时段</button></th>
                        </tr>
                    </thead>
                    <tbody id="tempDateBody">
                        <tr>
                            <td colspan="3" style="text-align: center;" >暂无数据</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-offset-5 col-sm-10">
                <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<script type="text/javascript">
    jQuery.validator.addMethod("minNumber",function(value, element){
        var returnVal = true;
        inputZ=value;
        var ArrMen= inputZ.split(".");    //截取字符串
        if(ArrMen.length==2){
            if(ArrMen[1].length>2){    //判断小数点后面的字符串长度
                returnVal = false;
                return false;
            }
        }
        return returnVal;
    }, "小数点后最多为两位");

    var prefix = ctx + "teach/class"
    $("#form-class-add").validate({
        onkeyup: false,
        rules:{
            name:{
                remote: {
                    url: ctx + "teach/class/checkNameUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "name" : function() {
                            return $.common.trim($("#name").val());
                        }
                    },
                    dataFilter: function(data, type) {
                        return $.validate.unique(data);
                    }
                }
            },
            standardCoursePrice: {
                required: true,    //要求输入不能为空
                number: true,     //输入必须是数字
                min: 0.01,          //输入的数字最小值为0.01，不能为0或者负数
                minNumber: $("#standardCoursePrice").val()    //调用自定义验证
            },
            standardClass:{
                digits:true
            },
            priceFloatUp:{
                digits:true
            },
            priceFloatDown:{
                digits:true
            }
        },
        messages: {
            "name": {
                remote: "名称已存在！"
            },
            "standardCoursePrice": {
                required: "请填写标准课次单价",
                number: "请正确输入数值",
                min: "输入最小数值为0.01",
                length: "输入数字最多小数点后两位"
            }
        },
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            var formData =  $("#form-class-add").serializeArray();
            //将序列化数据转为对象
            var formObject = {};
            for (var item in formData) {
                formObject[formData[item].name] = formData[item].value;
            }
            var arr = new Array($("#tempDateBody").find("tr").length);
            $("#tempDateBody").find("tr").each(function(i) {
                var classDate = $(this).find(".theTempClassDate").text();
                var beginTime1 = $(this).find(".theTempTime1").text();
                var beginTime2 = $(this).find(".theTempTime2").text();
                var endTime1 = $(this).find(".theTempTime3").text();
                var endTime2 = $(this).find(".theTempTime4").text();
                var fullTime = beginTime1  + ":" + beginTime2 + "-" + endTime1  + ":" + endTime2;
                formObject['classTimes[' + i + '].classDate'] = classDate;
                formObject['classTimes[' + i + '].beginTime1'] = beginTime1;
                formObject['classTimes[' + i + '].beginTime2'] = beginTime2;
                formObject['classTimes[' + i + '].endTime1'] = endTime1;
                formObject['classTimes[' + i + '].endTime2'] = endTime2;
                formObject['classTimes[' + i + '].fullTime'] = fullTime;
            })

            // $.operate.save(prefix + "/add", $('#form-class-add').serialize());
            $.operate.save(prefix + "/add",  formObject);
        }
    }

    // 加载选中课程
    function chooseCourseIds(courseId, courseName, courseNum) {
        $("#courseId").val(courseId);
        $("#courseName").html(courseName);
        $("#courseNum").val(courseNum);
    }

    // 加载选中日期
    function chooseDates(dates) {
        $("#dates").val(dates);
        $("#tempDateBody").empty();
        var arr = dates.split(',');
        for (let i = 0; i < arr.length; i++) {
            if (arr[i]) {
                $("#tempDateBody").append("<tr><td class='theTempClassDate'>" + arr[i] + "</td><td><span class='tempClassTime' id=\"" + arr[i] + "\"></span>" +
                    "<span class='theTempTime1' style='display: none;'></span>" +
                    "<span class='theTempTime2' style='display: none;'></span>" +
                    "<span class='theTempTime3' style='display: none;'></span>" +
                    "<span class='theTempTime4' style='display: none;'></span>" +
                    "</td>" +
                    "<td> <button type=\"button\" class=\"btn btn-w-m btn-info\" onclick=\"selectTime('" + arr[i] + "')\" >设置上课时段</button></td></tr>");
            }
        }
    }

    // 加载选中时间
    function chooseTimes(tempDate, time1, time2, time3, time4) {
        // $("#time1").val(time1);
        // $("#time2").val(time2);
        // $("#time3").val(time3);
        // $("#time4").val(time4);
        var times = time1 + ":" + time2 + "-" + time3 + ":" + time4;
        if (!tempDate || tempDate == 'undefined' || tempDate == undefined) {
            $(".theTempTime1").html(time1);
            $(".theTempTime2").html(time2);
            $(".theTempTime3").html(time3);
            $(".theTempTime4").html(time4);
            $(".tempClassTime").html(times);
        } else {
            $("#" + tempDate).parent().find(".theTempTime1").html(time1);
            $("#" + tempDate).parent().find(".theTempTime2").html(time2);
            $("#" + tempDate).parent().find(".theTempTime3").html(time3);
            $("#" + tempDate).parent().find(".theTempTime4").html(time4);
            $("#" + tempDate).html(times);
        }
    }

    function selectCourse() {
        var url = prefix +  "/searchCourse?ids=" + $("#courseId").val();
        $.modal.open("选择课程", url);
    }

    function selectDate() {
        var url = prefix +  "/selectDate?dates=" + $("#dates").val();
        $.modal.open("选择日期", url);
    }

    function selectTime(tempDate) {
        var url = prefix +  "/selectTime";
        if (tempDate) {
            var time1= $("#" + tempDate).parent().find(".theTempTime1").html();
            // console.log("time1 =======" + time1);
            var time2= $("#" + tempDate).parent().find(".theTempTime2").html();
            var time3= $("#" + tempDate).parent().find(".theTempTime3").html();
            var time4= $("#" + tempDate).parent().find(".theTempTime4").html();
            url += "?time1=" + time1 + "&time2=" + time2 +
            "&time3=" + time3 + "&time4=" + time4 + "&tempDate=" + tempDate;
        }
        $.modal.open("设置上课时段", url);
    }

    function selectClassType(type) {
        if (type == 0) {
            $("#tempBtn").show();
            $("#tempTable").show();
        } else {
            $("#tempBtn").hide();
            $("#tempTable").hide();
        }
    }
</script>
</body>
</html>